\nimport React, { useState, useEffect } from 'react';\n\nfunction ExampleComponent({ userId }) {\n  const [userData, setUserData] = useState(null);\n\n  useEffect(() => {\n    async function fetchData() {\n      const response = await fetch(`https://api.example.com/users/${userId}`);\n      const data = await response.json();\n      setUserData(data);\n    }\n\n    fetchData();\n  }, [userId]); // Dependency array: only re-run when userId changes\n\n  if (!userData) {\n    return 
Loading...
;\n  }\n\n  return (\n    
\n      
{userData.name}
\n      
{userData.email}
\n    
\n  );\n}\n\nexport default ExampleComponent;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    const intervalId = setInterval(() => {\n      setCount(count + 1); // Potential issue: `count` is not a dependency\n    }, 1000);\n\n    return () => clearInterval(intervalId);\n  }, []); // Empty dependency array: effect runs only once\n\n  return 
Count: {count}
;\n}\n\nexport default Counter;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    const intervalId = setInterval(() => {\n      setCount(prevCount => prevCount + 1); // Correct: use functional update\n    }, 1000);\n\n    return () => clearInterval(intervalId);\n  }, []); // Now no dependency is needed since we use the functional update form.\n\n  return 
Count: {count}
;\n}\n\nexport default Counter;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction DisplayData({ data }) {\n  const [processedData, setProcessedData] = useState(null);\n\n  useEffect(() => {\n    // Perform some complex data processing\n    const result = processData(data);\n    setProcessedData(result);\n  }, [data]); // Problem: `data` is an object, so it changes on every render\n\n  function processData(data) {\n    // Complex data processing logic\n    return data;\n  }\n\n  if (!processedData) {\n    return 
Loading...
;\n  }\n\n  return 
{processedData.value}
;\n}\n\nexport default DisplayData;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect, useMemo } from 'react';\n\nfunction ParentComponent() {\n  const [value, setValue] = useState(0);\n\n  // Memoize the `data` object\n  const data = useMemo(() => ({ value }), [value]);\n\n  return ;\n}\n\nfunction DisplayData({ data }) {\n  const [processedData, setProcessedData] = useState(null);\n\n  useEffect(() => {\n    // Perform some complex data processing\n    const result = processData(data);\n    setProcessedData(result);\n  }, [data]); // Now `data` only changes when `value` changes\n\n  function processData(data) {\n    // Complex data processing logic\n    return data;\n  }\n\n  if (!processedData) {\n    return 
Loading...
;\n  }\n\n  return 
{processedData.value}
;\n}\n\nexport default ParentComponent;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction ParentComponent() {\n  const [value, setValue] = useState(0);\n\n  return ; // Pass `value` directly\n}\n\nfunction DisplayData({ value }) {\n  const [processedData, setProcessedData] = useState(null);\n\n  useEffect(() => {\n    // Perform some complex data processing\n    const result = processData(value);\n    setProcessedData(result);\n  }, [value]); // Only re-run when `value` changes\n\n  function processData(value) {\n    // Complex data processing logic\n    return { value }; // Wrap in object if needed inside DisplayData\n  }\n\n  if (!processedData) {\n    return 
Loading...
;\n  }\n\n  return 
{processedData.value}
;\n}\n\nexport default ParentComponent;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect, useRef } from 'react';\nimport { isEqual } from 'lodash'; // Requires lodash library (npm install lodash)\n\nfunction DisplayData({ data }) {\n  const [processedData, setProcessedData] = useState(null);\n  const previousData = useRef(data);\n\n  useEffect(() => {\n    if (!isEqual(data, previousData.current)) {\n      // Perform some complex data processing\n      const result = processData(data);\n      setProcessedData(result);\n      previousData.current = data;\n    }\n  }, [data]); // `data` is still in the dependency array, but we check for deep equality\n\n  function processData(data) {\n    // Complex data processing logic\n    return data;\n  }\n\n  if (!processedData) {\n    return 
Loading...
;\n  }\n\n  return 
{processedData.value}
;\n}\n\nexport default DisplayData;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction InfiniteLoop() {\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    // Fetch data from an API\n    fetch('https://api.example.com/data')\n      .then(response => response.json())\n      .then(result => {\n        setData(result); // Updates `data` state\n      });\n  }, [data]); // Problem: `data` is a dependency, so the effect re-runs when `data` changes\n\n  if (!data) {\n    return 
Loading...
;\n  }\n\n  return 
{data.value}
;\n}\n\nexport default InfiniteLoop;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction InfiniteLoop() {\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    // Fetch data from an API\n    fetch('https://api.example.com/data')\n      .then(response => response.json())\n      .then(result => {\n        setData(result);\n      });\n  }, []); // Empty dependency array: effect runs only once\n\n  if (!data) {\n    return 
Loading...
;\n  }\n\n  return 
{data.value}
;\n}\n\nexport default InfiniteLoop;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction InfiniteLoop() {\n  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);\n\n  useEffect(() => {\n    if (isLoading) {\n      // Fetch data from an API\n      fetch('https://api.example.com/data')\n        .then(response => response.json())\n        .then(result => {\n          setData(result);\n          setIsLoading(false);\n        });\n    }\n  }, [isLoading]); // Only re-run when `isLoading` changes\n\n  if (!data) {\n    return 
Loading...
;\n  }\n\n  return 
{data.value}
;\n}\n\nexport default InfiniteLoop;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction InfiniteLoop() {\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    if (!data) {\n      // Fetch data from an API\n      fetch('https://api.example.com/data')\n        .then(response => response.json())\n        .then(result => {\n          setData(result);\n        });\n    }\n  }, [data]); // `data` is still a dependency but the effect is conditional\n\n  if (!data) {\n    return 
Loading...
;\n  }\n\n  return 
{data.value}
;\n}\n\nexport default InfiniteLoop;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction MutableObject() {\n  const [config, setConfig] = useState({ theme: 'light', language: 'en' });\n\n  useEffect(() => {\n    console.log('Config changed:', config);\n  }, [config]); // Problem: Changes to `config.theme` or `config.language` won't trigger the effect\n\n  const toggleTheme = () => {\n    // Mutating the object\n    config.theme = config.theme === 'light' ? 'dark' : 'light';\n    setConfig(config); // This won't trigger a re-render or the effect\n  };\n\n  return (\n    
\n      
Theme: {config.theme}, Language: {config.language}
;\n      Toggle Theme\n    
\n  );\n}\n\nexport default MutableObject;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction MutableObject() {\n  const [config, setConfig] = useState({ theme: 'light', language: 'en' });\n\n  useEffect(() => {\n    console.log('Config changed:', config);\n  }, [config]); // Now the effect will trigger when `config` changes\n\n  const toggleTheme = () => {\n    setConfig({ ...config, theme: config.theme === 'light' ? 'dark' : 'light' }); // Create a new object\n  };\n\n  return (\n    
\n      
Theme: {config.theme}, Language: {config.language}
;\n      Toggle Theme\n    
\n  );\n}\n\nexport default MutableObject;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect, useCallback } from 'react';\n\nfunction useFetchData(url) {\n  const [data, setData] = useState(null);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState(null);\n\n  const fetchData = useCallback(async () => {\n    setIsLoading(true);\n    try {\n      const response = await fetch(url);\n      const result = await response.json();\n      setData(result);\n    } catch (err) {\n      setError(err);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [url]); // Memoize `fetchData` based on `url`\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]); // Now `fetchData` only changes when `url` changes\n\n  return { data, isLoading, error };\n}\n\nfunction MyComponent() {\n  const [userId, setUserId] = useState(1);\n  const { data, isLoading, error } = useFetchData(`https://api.example.com/users/${userId}`);\n\n  return (\n    
\n      {/* ... */}\n    
\n  );\n}\n\nexport default MyComponent;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect, useRef } from 'react';\n\nfunction LogLatestValue({ value }) {\n  const latestValue = useRef(value);\n\n  useEffect(() => {\n    latestValue.current = value; // Update the ref on every render\n  }, [value]); // Update the ref when `value` changes\n\n  useEffect(() => {\n    // Log the latest value after 5 seconds\n    const timerId = setTimeout(() => {\n      console.log('Latest value:', latestValue.current); // Access the latest value from the ref\n    }, 5000);\n\n    return () => clearTimeout(timerId);\n  }, []); // Effect runs only once on mount\n\n  return 
Value: {value}
;\n}\n\nexport default LogLatestValue;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\n// Custom comparator to only track theme changes.\nfunction useTheme(config) {\n    const [theme, setTheme] = useState(config.theme);\n\n    useEffect(() => {\n        setTheme(config.theme);\n    }, [config.theme]);\n\n    return theme;\n}\n\nfunction ConfigComponent({ config }) {\n    const theme = useTheme(config);\n\n    return (\n        
The current theme is {theme}
\n    )\n}\n\nexport default ConfigComponent;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\nimport { format } from 'date-fns'; // Requires date-fns library (npm install date-fns)\n\nfunction LocalizedDate({ date, locale }) {\n  const [formattedDate, setFormattedDate] = useState('');\n\n  useEffect(() => {\n    setFormattedDate(format(date, 'PPPP', { locale }));\n  }, [date, locale]); // Re-run when `date` or `locale` changes\n\n  return 
{formattedDate}
;\n}\n\nexport default LocalizedDate;\n
            

              
                Copy
              
            
          

            \nimport React, { useState, useEffect } from 'react';\n\nfunction LocalizedCurrency({ amount, currency, locale }) {\n  const [formattedCurrency, setFormattedCurrency] = useState('');\n\n  useEffect(() => {\n    setFormattedCurrency(new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount));\n  }, [amount, currency, locale]); // Re-run when `amount`, `currency`, or `locale` changes\n\n  return 
{formattedCurrency}
;\n}\n\nexport default LocalizedCurrency;\n
            

              
                Copy